// ===============================
// AboutUs 模块专属样式 - 现代化设计风格
// ===============================

// ===============================
// AboutUs 特有的证书展示样式
// ===============================

.certificates {
	.certificate-grid {
		.cards-grid-plus {
			// 证书卡片的特殊样式
		}

		.certificate-card {
			// 确保证书卡片高度一致
			display: flex;
			flex-direction: column;
			height: 100%;

			.image-container {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 200px;
			}

			.certificate-info {
				padding: 20px;
				text-align: center;
				background: var(--theme-card-footer-bg);
				border-top: 1px solid var(--theme-content-border);
				margin-top: auto; // 将信息推到底部

				.certificate-name {
					font-size: 1rem;
					font-weight: 600;
					color: var(--theme-content-title);
					margin: 0;
					line-height: 1.4;
				}
			}
		}
	}
}

// ===============================
// 软件著作权特殊布局 - 一行7个
// ===============================

.software {
	.cards-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 15px;
		padding: 20px 0;

		.image-item {
			.card {
				.image-container {
					.image-placeholder-small {
						height: 180px !important;
					}
				}
			}
		}
	}
}

// ===============================
// 修复所有卡片高度一致性 - 提高特异性
// ===============================

.about-us .achievements {
	.image-item {
		.card {
			display: flex;
			flex-direction: column;
			height: 100%;
			min-height: 240px; // 确保最小高度一致

			.image-container {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				min-height: 200px;
				position: relative;
				overflow: hidden;

				.image-placeholder-small {
					width: 100% !important;
					height: 200px !important;

					:deep(.el-image) {
						width: 100% !important;
						height: 100% !important;
						cursor: pointer;
					}

					:deep(.el-image__inner) {
						object-fit: contain !important;
						width: 100% !important;
						height: 100% !important;
						cursor: pointer;
					}
				}

				// 确保预览功能正常
				.image-overlay {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: var(--theme-overlay-bg);
					display: flex;
					align-items: center;
					justify-content: center;
					opacity: 0;
					transition: all 0.3s ease;
					cursor: pointer;
					z-index: 2;

					.overlay-text {
						color: white;
						font-weight: 600;
						font-size: 1rem;
						text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
						pointer-events: none;
					}
				}

				&:hover .image-overlay {
					opacity: 1;
				}

				// 移除公共样式中的 scale 效果，避免影响预览
				&:hover .image-placeholder-small {
					transform: none;
				}
			}
		}
	}
}

// ===============================
// 特别针对证书卡片的样式
// ===============================

.about-us .achievements .certificates {
	.image-item .card.certificate-card {
		.image-container {
			.image-placeholder-small {
				:deep(.el-image__inner) {
					object-fit: contain !important;
				}
			}
		}
	}
}

// ===============================
// 确保 Element Plus 预览正常工作
// ===============================

.about-us {
	// 确保 el-image 组件可以正常触发预览
	:deep(.el-image) {
		cursor: pointer;

		&:hover {
			opacity: 0.9;
		}
	}

	// 确保 image-overlay 不会阻挡点击事件
	.image-overlay {
		pointer-events: none;
	}
}

// ===============================
// AboutUs 特有的响应式适配
// ===============================

@media (max-width: 1024px) {
	.product-image-placeholder {
		height: auto !important;
	}

	// 平板端软件著作权 - 一行5个
	.software .cards-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 12px;
	}
}

@media (max-width: 768px) {
	.certificates .certificate-grid .certificate-card {
		.image-container {
			min-height: 150px;

			.image-placeholder-small {
				height: 150px !important;
			}
		}

		.certificate-info {
			padding: 15px;

			.certificate-name {
				font-size: 0.9rem;
			}
		}
	}

	.about-us .achievements .image-item .card {
		min-height: 190px;

		.image-container {
			min-height: 150px;

			.image-placeholder-small {
				height: 150px !important;
			}
		}
	}

	// 手机端软件著作权 - 一行3个
	.software .cards-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;

		.image-item .card .image-container .image-placeholder-small {
			height: 140px !important;
		}
	}
}

@media (max-width: 480px) {
	.certificates .certificate-grid .certificate-card {
		.image-container {
			min-height: 120px;

			.image-placeholder-small {
				height: 120px !important;
			}
		}

		.certificate-info {
			padding: 12px;

			.certificate-name {
				font-size: 0.8rem;
			}
		}
	}

	.about-us .achievements .image-item .card {
		min-height: 160px;

		.image-container {
			min-height: 120px;

			.image-placeholder-small {
				height: 120px !important;
				flex: inherit !important;
			}
		}
	}

	// 超小屏幕软件著作权 - 一行2个
	.software .cards-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;

		.image-item .card .image-container .image-placeholder-small {
			height: 120px !important;
		}
	}

	.product-image-placeholder {
		min-height: initial !important;
	}
}
